{% extends "personal_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .tab_top {
            width: 100px;height: 40px;line-height: 40px;text-align: center;display: inline-block;cursor: pointer;
        }
        .left_tag {
            width: 100%;height: 30px;line-height: 30px;padding-left: 20px;border-bottom: #cfcfcf dashed 1px;cursor: pointer;
        }
        .left_tag_active {
            border-bottom: #0d8ddb dashed 1px;color: #0d8ddb;
        }
        #report_data tr:hover {
            background: #F5F5F5;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="display: inline-block;vertical-align: top;width: 100%;height: 100%;">
{#        <div class="headline" style="padding-right: 2%;">#}
{#            <div style="display: inline-block;vertical-align: top;height: 40px;float: right;margin-left: 10px;">#}
{#                <button class="search-action" style="width: 100px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;line-height: 25px;letter-spacing: 3px;">搜索</button>#}
{#            </div>#}
{#            <div style="display: inline-block;vertical-align: top;width: 200px;height: 40px;margin-left: 1%;padding-top: 5px;float: right;">#}
{#                <select name="" id="year" style="width: 100%;height: 30px;border: #2db7f5 solid 1px;outline: none;" class="dept_select">#}
{#                    {% for year in year_list %}#}
{#                        <option value="{{ year }}">{{ year }}</option>#}
{#                    {% endfor %}#}
{#                </select>#}
{#            </div>#}
{#        </div>#}
        <div style="width: 100%;height: 100%;background-color: white;">
            <div style="width: 19%;height: 100%;display: inline-block;vertical-align: top;overflow: auto;border-right: #cfcfcf solid 1px;">
                {% for dep in dep_list %}
                    <div {% if forloop.first %}class="left_tag left_tag_active" {% else %}class="left_tag" {% endif %} onclick="ajax_report_data({{ dep.id }}, this)">{{ dep.name }}</div>
                {% endfor %}
            </div>
            <div style="width: 80%;height: 100%;background-color: white;display: inline-block;vertical-align: top;">
                <div style="width: 100%;">
                    <table style="width: 100%;">
                        <tr style="width: 100%;background: #F5F5F5;">
                            <td style="width: 5%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-left: none;border-top: none;">序号</td>
                            <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-top: none;">姓名</td>
                            <td style="width: 50%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-top: none;">所属科室</td>
                            <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-top: none;">是否填写</td>
                            <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-right: none;border-top: none;">是否提交</td>
                        </tr>
                    </table>
                </div>
                <div style="width: 100%;height: 95.3%;overflow: auto;">
                    <table id="report_data" style="width: 100%;">

                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
            ajax_report_data(1001, '')
        };

        function ajax_report_data(dep_id, tag_obj) {
            var form = new FormData();
            form.append("dep_id", dep_id)
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/medical-ethics/EvaluationReport.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        if (tag_obj) {
                            var left_tag_list = document.getElementsByClassName('left_tag');
                            for (var i=0; i<left_tag_list.length; i++) {
                                left_tag_list[i].className = "left_tag";
                            }
                            tag_obj.className = "left_tag left_tag_active";
                        }

                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate['code'] === 200) {
                            document.getElementById("report_data").innerHTML = "";
                            for (var j=0; j<JsonDate['data'].length; j++) {
                                var html_str = `
                                    <tr style="width: 100%;color: `+JsonDate['data'][j]["color"]+`;">
                                        <td style="width: 5%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-left: none;border-top: none;">`+JsonDate['data'][j]["serial"]+`</td>
                                        <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-top: none;">`+JsonDate['data'][j]["name"]+`</td>
                                        <td style="width: 50%;height: 30px;border: #cfcfcf solid 1px;border-top: none;padding-left: 5px;">`+JsonDate['data'][j]["dep"]+`</td>
                                        <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-top: none;">`+JsonDate['data'][j]["fill"]+`</td>
                                        <td style="width: 15%;height: 30px;border: #cfcfcf solid 1px;text-align: center;border-right: none;border-top: none;">`+JsonDate['data'][j]["commit"]+`</td>
                                    </tr>
                                `
                                $("#report_data").append(html_str)
                            }
                        } else {
                            alert(JsonDate['message'])
                        }
                    }
                }
            }
        }
    </script>
{% endblock %}
